<%@ page language="java" pageEncoding="utf-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib uri="/view/conf/farmtag.tld" prefix="PF"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn"%>
<style>
.ke-icon-imword {
	background-image: url(text/lib/kindeditor/themes/common/docx.png);
	background-position: 0px 0px;
	width: 16px;
	height: 16px;
}
</style>
<div class="modal fade" role="dialog" id="modelWordInWindow"
	style="z-index: 999">
	<div class="modal-dialog" role="document" style="margin-top: 100px;">
		<div class="modal-content">
			<div class="modal-header">
				<h4 class="modal-title" style="font-weight: 700">解析word文件并插入编辑器</h4>
			</div>
			<div >
				<div  style="margin: 20px;">
					<div class=" text-center">点击下方按钮，上传一个docx格式的word文档，解析该文档并插入编辑器中。</div>
				</div>
				<div style="margin: 20px;">
					<div class="btn-group btn-group-justified" role="group"
						aria-label="...">
						<span class="btn btn-info btn-lg center-block fileinput-button">
							<span id="fileupTitleId">上传.docx文件</span><span
							class="presessInfor" id="html5WordInuploadProsess"></span> <input
							id="fileupload" type="file" name="imgFile" multiple>
						</span>
					</div>
				</div>
			</div>
			<div class="modal-footer">
				<button type="button" class="btn btn-default"
					onclick="$('#modelWordInWindow').modal('hide')">关闭</button>
			</div>
		</div>
		<!-- /.modal-content -->
	</div>
	<!-- /.modal-dialog -->
</div>
<!-- /.modal -->
<script>
	// 自定义插件 #1
	KindEditor.lang({
		imword : '导入word'
	});
	KindEditor.plugin('imword', function(K) {
		var self = this, name = 'imword';
		self.clickToolbar(name, function() {
			$('#modelWordInWindow').modal({
				keyboard : false,
				backdrop : false
			})
		});
	});
</script>
<script type="text/javascript">
	//单个文件大小
	var maxSize = 20*1024*1024;
	var maxSizeTitle = (maxSize / 1024 / 1024).toFixed(2);
	//单次上传文件数量
	var maxFileNum = 1;
	//是否继续加载远程进度
	var isLoadRemotProecess = false;
	$(function() {
		$('#fileupTitleId').text('上传.docx文件');
		$('#fileupload').fileupload(
				{
					url : "actionImg/PubFPupload.do?limittypes=docx",
					dataType : 'json',
					change : function(e, data) {
						//校验大小
						return updateFileValidate(data.files);
					},
					done : function(e, data) {
						if (data.result.error != 0) {
							alert(data.result.message);
							$('#fileupTitleId').text('上传.docx文件');
							return;
						}else{
							$('#fileupTitleId').text('解析中...');
							submitWordDocxWaitBackHtml(data.result.id);
						}
					},
					progressall : function(e, data) {
						var progress = parseInt(data.loaded / data.total * 100,
								10);
						//显示进度
						showUploadProcess(true, "数据上传", progress);
						if (progress >= 100 ) {
							//显示远程服务器端处理进度
							initLoadRemoteProcess(true);
						}
					}
				});
	});
	
	//解析word文件并返回html
	function submitWordDocxWaitBackHtml(fileId){
		$.post('home/wordToHtml.do',{'fileid':fileId},function(flag){
			if(flag.STATE==1){
				alert(flag.MESSAGE)
				$('#fileupTitleId').text('上传.docx文件');
			}else{
				try {
					editor.focus();
					editor.insertHtml(" ");
				} catch (e) {
					editor.appendHtml(" ")
				}
				try{
					editor.focus();
					editor.insertHtml(flag.HTML);
				}catch(e){}
				$('#fileupTitleId').text('上传.docx文件');
				$('#modelWordInWindow').modal('hide');
			}
		},'json');
	}
	
	//加载上传进度isShow，是否显示进度信息title进度标题, process进度值百分比
	function showUploadProcess(isShow, title, process) {
		if (!isShow) {
			//隐藏进度
			$('#html5WordInuploadProsess').hide();
			return;
		} else {
			if (process) {
				//显示进度
				$('#html5WordInuploadProsess').show();
				if(process>100){
					process=100;
				}
				$('#html5WordInuploadProsess').text(title + process + '%...');
				if (process >= 100 ) {
					//完成后隐藏进度
					$('#html5WordInuploadProsess').hide();
				}
			} else {
				//只显示标题
				$('#html5WordInuploadProsess').show();
				$('#html5WordInuploadProsess').text(title);
			}
		}
	}
	
	//检查远程进度state：是否加载远程进度
	function initLoadRemoteProcess(state) {
		if (!state) {
			isLoadRemotProecess = false;
			showUploadProcess(false);
		} else {
			if (!isLoadRemotProecess) {
				isLoadRemotProecess = true;
				showUploadProcess(true, '等待数据处理...');
				doloadRemoteProcess();
			}
		}
	}
	//加载远程进度
	function doloadRemoteProcess() {
		$.post("actionImg/PubUploadProcess.do", {}, function(flag) {
			if (flag.STATE == 0) {
				showUploadProcess(true, '数据处理', flag.process);
				if (isLoadRemotProecess&&flag.process<100) {
					setTimeout("doloadRemoteProcess()", 1000); //延迟1秒	
				} 
			} else {
				alert(flag.MESSAGE);
			}
		}, 'json');
	}
	//检查上传文件，返回值为是否允许上传
	function updateFileValidate(files) {
		if (files.length > maxFileNum) {
			alert("单次上传文件数量不能大于" + maxFileNum + "个!");
			return false;
		}
		var isOK = true;
		$(files).each(function(i, obj) {
			if (obj.size > maxSize) {
				alert("文件" + obj.name + "超大,请检查文件大小不能大于" + maxSizeTitle + "m");
				isOK = false;
			}
			if (!/\.(docx)$/.test(obj.name)) {    
	            alert("只允许上传docx格式的word文件!");    
	            isOK = false;
	        }    
		});
		return isOK;
	}
</script>